document.getElementById('fetchButton').addEventListener('click', () => {
    const resourceId = document.getElementById('resourceId').value;
    if (resourceId) {
        // Create a port for long-lived connection
        const port = chrome.runtime.connect({ name: "resourceChannel" });

        // Send the resourceId to the background script
        port.postMessage({ action: "fetchData", resourceId: resourceId });

        // Listen for messages from the background script
        port.onMessage.addListener(response => {
            if (response.error) {
                document.getElementById('result').textContent = "Error: " + response.error;
            } else {
                document.getElementById('result').textContent = JSON.stringify(response.data, null, 2);
            }
        });
    } else {
        document.getElementById('result').textContent = "Please enter a Resource ID.";
    }
});
